<template>
    <div class="wrap">
        <div class="flexWrap">
            <div class="leftWrap">
                <div class="app-button-container">
                    <el-button type="primary" @click="dialogLeftTop1_1_show()"> 新建手术</el-button>
                    <el-button type="primary" @click="dialogLeftTop1_2_show()"> 随访设置</el-button>
                    <el-button type="primary" @click="dialogLeftTop1_3_show()"> 医生设置</el-button>
                </div>
                <div class="filter-container">
                    <div class= 'filterBox'>
                    <div class='leftPart filterPart'>
                    </div>
                    <div class='rightPart filterPart'>
                        <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter.keywords">
                        </el-input>
                        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getListBySearch">搜索</el-button>
                    </div>
                    </div>
                </div>
                <complexTable
                  :hasSelection= false 
                  :list = 'tableList1' 
                  :totalList = 'totalList1' 
                  :theadList = "operationDirectoryConst.theadList1" 
                  :operationButtons = 'operationDirectoryConst.operationButtons1'
                  :statusArr = 'operationDirectoryConst.statusArr' 
                  @operationEvent0 = 'operationEvent1_0' 
                  @operationEvent1 = 'operationEvent1_1' 
                  @operationEvent2 = 'operationEvent1_2'
                  @getRowClick = 'getRowClick' 
                  @getListByPagination = 'getListByPagination'>
                </complexTable>
            </div>
            <div class="rightWrap">
              <category :options = 'options' @selectedType = 'selectedType'></category>
            </div>
        </div>
        <el-dialog  :title="dialogLeftTop1_1_title" :visible.sync="dialogLeftTop1_1" class='dialogLeftTop1_1'>
            <el-form ref="formLeftTop1" :model="formLeftTop1" label-width="80px">
                <el-form-item label="类型">
                <el-select v-model="formLeftTop1.type" placeholder="请选择手术类型" >
                    <el-option v-for = 'item in options' :label="item.label" :value="item.value" :key = 'item.value'></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="手术名称">
                    <el-input v-model = 'formLeftTop1.name'></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <div class="editor-container">
                        <tinymce :height=400 ref="editor" v-model="formLeftTop1.introduction"></tinymce>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLeftTop1_1 = false">取 消</el-button>
                <el-button type="primary" @click="formLeftTop1_submit()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog  title="手术简介预览" :visible.sync="previewShow" class='dialogLeftTop1_1'>
            <el-row>
              <el-col>
                <div>
                  <h3>手术名称：</h3> 
                  <p style='padding-left:20px;'>{{previewData.name}}</p>
                </div>
                </el-col>
            </el-row>
            <el-row>
              <el-col>
                 <div>
                  <h3>手术类型：</h3> 
                  <p style='padding-left:20px;'>{{previewData.type}}</p>
                </div>
                </el-col>
            </el-row>
            <el-row>
              <el-col>
                 <div>
                  <h3>手术简介：</h3> 
                  <p style='padding-left:20px;'>{{previewData.introduction}}</p>
              </div>
              </el-col>
            </el-row>
        </el-dialog>
        <el-dialog  title="随访设置" :visible.sync="dialogLeftTop1_2" class='dialogLeftTop1_2'>
            <h2>手术信息</h2>
            <el-row :gutter="20">
                <el-col :span="12"><div>手术名称：{{surgeryInfo.name}}</div></el-col>
                <el-col :span="12"><div >手术类别：{{surgeryInfo.typeShow}}</div></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"><div>手术标识：{{surgeryInfo.flagShow}}</div></el-col>
                <el-col :span="12"><div>启用标识：{{surgeryInfo.status === 0?'停用':'启用'}}</div></el-col>
            </el-row>
            <h2>随访规则</h2>
            <el-form ref="formLeftTop2" :inline = true :model="formLeftTop2" label-width="80px">
                <el-form-item label="随访次数" :label-width="'120px'">
                    <el-input  v-model = 'formLeftTop2.followNum' style = 'width: 274px'></el-input>
                </el-form-item>

                <el-form-item label="首次随访时间" :label-width="'120px'">
                    <el-input v-model="formLeftTop2.firstFollow" auto-complete="off"  style = 'width: 276px'>
                    <template slot="append">天</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="随访间隔时间" :label-width="'120px'">
                    <el-input v-model="formLeftTop2.followSpace" auto-complete="off"  style = 'width: 190px'></el-input>
                </el-form-item>
                <el-form-item :label-width="'0'">
                  <el-select v-model="formLeftTop2.timeUnit" style='width: 70px;'>
                    <el-option v-for = 'item in timeType' :label="item.label" :value="item.value" :key = 'item.value'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="有效天数" :label-width="'120px'">
                    <el-input v-model="formLeftTop2.validDay" auto-complete="off"  style = 'width: 276px'>
                    <template slot="append">天</template>
                </el-input>
                </el-form-item>
            </el-form>
            <el-button style = 'float:right;' type="primary" @click="saveFollowRule()">保存</el-button>

            <h2 style = 'padding-top: 20px;'>随访表单</h2>
            <el-button style ='float: right;' type = 'primary' @click="dialogLeftTop1_2_1_show()">选择表单</el-button>
            <complex-table
              :list = 'selForm.tableList2'
              :totalList = 'selForm.totalList2' :columnsType ="'index'"
              :theadList = "operationDirectoryConst.theadList2"
              :operationButtons = 'operationDirectoryConst.operationButtons2'
              @getListByPagination = 'getListByPagination2'
              @operationEvent0 = 'delFollowForm'>
            </complex-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLeftTop1_2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogLeftTop1_2 = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog  title="随访设置-选择表单" :visible.sync="dialogLeftTop1_2_1" class='dialogLeftTop1_2'>
            <div class="filter-container">
                <div class= 'filterBox'>
                <div class='leftPart filterPart'>
                </div>
                <div class='rightPart filterPart'>
                    <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="uSelect.filter.keywords">
                    </el-input>
                    <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getListBySearch3">搜索</el-button>
                </div>
                </div>
            </div>
            <complex-table :list = 'uSelect.tableList3' :totalList = 'uSelect.totalList3' :theadList = "operationDirectoryConst.theadList2"
                           :hasOperate = false @getSelectArr = 'getSelectArr' @getListByPagination = 'getListByPagination3'>
            </complex-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLeftTop1_2_1 = false">取 消</el-button>
                <el-button type="primary" @click="addFollowForm()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog  title= "医生设置" :visible.sync="dialogLeftTop1_3" class='dialogLeftTop1_3'>
            <div style="text-align: center">
                <el-transfer style="text-align: left; display: inline-block" v-model="value3" filterable
                :left-default-checked="[2, 3]"
                :right-default-checked="[1]"
                :render-content="renderFunc"
                :titles="['Source', 'Target']"
                :button-texts="['到左边', '到右边']"
                :format="{
                    noChecked: '${total}',
                    hasChecked: '${checked}/${total}'
                }"
                @change="handleChange"
                :data="doctorList">
                </el-transfer>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogLeftTop1_3 = false">取 消</el-button>
                    <el-button type="primary" @click="formLeftTop3_submit()">保存</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import waves from '@/directive/waves/index.js'
    import Tinymce from '@/components/Tinymce'
    import complexTable from '@/views/table/complexTable'
    import category from 'yimiviews/components/category'
    import { operationDirectoryConst } from '@/yimiviews/knowledgeManage/columnsConst'
    import { pending, postForm, remove, optDoctorSearch, optDoctorSave, operationFollowup, saveFollowupRule, selOperationForm, unSelOperationForm, addOperationForm, delOperationForm } from '@/api/knowledgeManage/operationDirectory'
    import { dictionary } from '@/api/knowledgeManage/dictionary'
    const defaultForm = {
      type: '',
      operateSurgery: '',
      description: '',
      editor: '',
      editTime: '',
      status: ''
    }
    export default {
      directives: { waves },
      components: { category, complexTable, Tinymce },
      mounted() {
        this.initSelect()
        this.handleFilter(this.listQuery)
      },
      data() {
        return {
          dialogLeftTop1_1: false,
          previewShow: false,
          previewData: {},
          dialogLeftTop1_2: false,
          dialogLeftTop1_3: false,
          dialogLeftTop1_2_1: false,
          operationDirectoryConst,
          timeType: [
            { label: '天', value: 0 },
            { label: '周', value: 1 },
            { label: '月', value: 2 },
            { label: '年', value: 3 }
          ],
          surgeryInfo: {},
          tableList1: [],
          totalList1: 0,
          listQuery: {
            page: 1,
            limit: 5
          },
          filter: {
            type: '',
            keywords: ''
          },
          selForm: { // 已选择表单
            tableList2: [],
            totalList2: 0,
            listQuery: {
              page: 1,
              limit: 5
            },
            filter: {
              operationId: ''
            }
          },
          selectArr: [],
          uSelect: { // 未选择表单
            tableList3: [],
            totalList3: 0,
            listQuery: {
              page: 1,
              limit: 5
            },
            filter: {
              operationId: '',
              keywords: ''
            }
          },
          selectRow: null,
          dialogLeftTop1_1_title: '',
          formLeftTop1: Object.assign({}, defaultForm),
          formLeftTop2: {
            timeUnit: 0
          },
          formLeftTop3: {
            type: 'day'
          },
          value3: [],
          doctorList: [],
          options: [],
          renderFunc(h, option) {
            return <span>{ option.key } - { option.label }</span>
          }
        }
      },
      methods: {
        selectedType(selected) {
          console.log('选择')
          console.log(selected)
          this.filter.type = selected.value
          this.handleFilter(this.listQuery)
        },
        initSelect() {
          dictionary({ type: 'sslx' }).then((res) => {
            this.options = res.data.list
          })
        },
        // 点击新建手术按钮
        dialogLeftTop1_1_show() {
          this.dialogLeftTop1_1_title = '新建'
          this.formLeftTop1 = Object.assign({}, defaultForm)
          this.dialogLeftTop1_1 = true
        },
        // 点击编辑按钮
        operationEvent1_0(row) {
          this.dialogLeftTop1_1_title = '编辑'
          this.formLeftTop1 = Object.assign({}, row)
          this.dialogLeftTop1_1 = !this.dialogLeftTop1_1
        },
        operationEvent1_1(row) {
          console.log(row.description)
          this.previewShow = true
          this.previewData = Object.assign({}, row)
          // this.formLeftTop2 = row.description
        },
        // 点击删除按钮
        operationEvent1_2(row) {
          this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            remove({ id: row.id }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.handleFilter(this.listQuery)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        // 新建手术保存
        formLeftTop1_submit() {
          console.log(this.formLeftTop1)
          postForm(this.formLeftTop1).then((res) => {
            this.dialogLeftTop1_1 = false
            this.$message({
              message: '恭喜你，提交成功!',
              type: 'success'
            })
            this.handleFilter(this.listQuery)
          })
        },
        // 随访设置弹出框
        dialogLeftTop1_2_show() {
          if (!this.selectRow) {
            this.$message({
              type: 'error',
              message: '请先选择一条数据'
            })
            return
          }
          operationFollowup({ operationId: this.selectRow.id }).then(res => {
            this.surgeryInfo = res.data.operation
            this.formLeftTop2 = Object.assign({}, res.data.followupRule)
          })
          this.selForm.filter.operationId = this.selectRow.id
          this.handleFilter2()
          this.dialogLeftTop1_2 = true
        },
        // 选择随访表单弹出框
        dialogLeftTop1_2_1_show() {
          this.uSelect.filter.operationId = this.selectRow.id
          this.uSelect.listQuery.page = 1
          this.handleFilter3()
          this.selectArr = []
          this.dialogLeftTop1_2_1 = true
        },
        // 保存随访规则
        saveFollowRule() {
          this.formLeftTop2.operationId = this.selectRow.id
          saveFollowupRule(this.formLeftTop2).then((res) => {
            this.$message({
              message: '恭喜你，提交成功!',
              type: 'success'
            })
          })
        },
        // 获取选择数据
        getSelectArr(selectArr) {
          this.selectArr = selectArr
          console.log(selectArr)
        },
        // 增加随访表单
        addFollowForm() {
          console.log('要添加的表单数据')
          const formIds = []
          for (const i of this.selectArr) {
            formIds.push(i.id)
          }
          addOperationForm({ operationId: this.selectRow.id, formIds: formIds }).then(res => {
            console.log(res)
            this.dialogLeftTop1_2_1 = false
            this.handleFilter2()
          })
          console.log(this.selectArr)
          console.log(formIds)
        },
        // 删除随访表单
        delFollowForm(row) {
          console.log('删除数据...')
          console.log(row)
          delOperationForm({ operationId: this.selectRow.id, followFormId: row.id }).then(res => {
            this.handleFilter2()
          })
        },
        // 医生设置弹出框
        dialogLeftTop1_3_show() {
          console.log('选择医生设置')
          if (this.selectRow != null) {
            optDoctorSearch({ operationId: this.selectRow.id }).then(res => {
              this.doctorList = res.data.allList
              this.value3 = res.data.selList
            })
            this.dialogLeftTop1_3 = true
          }
        },
        // 医生设置保存
        formLeftTop3_submit() {
          optDoctorSave({ operationId: this.selectRow.id, userIds: this.value3 }).then(res => {
            console.log(res)
            this.dialogLeftTop1_3 = false
          })
        },
        // 手术列表分页
        getListBySearch() {
          console.log('by search')
          this.listQuery.page = 1
          this.handleFilter(this.listQuery)
        },
        getListByPagination(listQuery) {
          console.log('分页参数')
          console.log(listQuery)
          this.listQuery = listQuery
          pending(listQuery).then(res => {
            this.tableList1 = res.data.list
            this.totalList1 = parseInt(res.data.total)
          })
        },
        handleFilter(listQuery) {
          const query = Object.assign({}, listQuery, this.filter)
          console.log(query)
          pending(query).then(res => {
            this.tableList1 = res.data.list
            this.totalList1 = parseInt(res.data.total)
          })
        },
        // 已选择表单分页
        getListByPagination2(listQuery) {
          console.log('分页参数')
          console.log(listQuery)
          this.selForm.listQuery = listQuery
          this.handleFilter2()
        },
        handleFilter2() {
          const query = Object.assign({}, this.selForm.listQuery, this.selForm.filter)
          selOperationForm(query).then(res => {
            this.selForm.tableList2 = res.data.list
            this.selForm.totalList2 = parseInt(res.data.total)
          })
        },
        // 未选择表单分页
        getListBySearch3() {
          console.log('by search')
          this.uSelect.listQuery.page = 1
          this.handleFilter3()
        },
        getListByPagination3(listQuery) {
          console.log('分页参数')
          console.log(listQuery)
          this.uSelect.listQuery = listQuery
          this.handleFilter3()
        },
        handleFilter3() {
          const query = Object.assign({}, this.uSelect.listQuery, this.uSelect.filter)
          console.log(query)
          unSelOperationForm(query).then(res => {
            this.uSelect.tableList3 = res.data.list
            this.uSelect.totalList3 = parseInt(res.data.total)
          })
        },
        getRowClick(row, event, column) {
          console.log('选择列信息...')
          console.log(row.id)
          this.selectRow = row
          console.log(this.selectRow)
        },
        handleChange(value, direction, movedKeys) {
          console.log(value, direction, movedKeys)
        }
      }
    }
</script>

<style lang="scss">
.wrap{
     .flexWrap{
        display: flex;
        height: 100%;
        background-color: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
        .leftWrap{
            flex: 10;
        }
        .rightWrap{
            flex: 2;
        }
    }


    .filterBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .filterPart{
        line-height: 2;
        }
    }
    .dialogLeftTop1_1{
        .el-select{
            display: block;
        }
    }
    .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
}
</style>
